<template>
  <view class="parent-container">
    <view class="page-header">
      <text class="page-title">组件传值示例</text>
      <text class="page-desc">父组件协调子组件A与B的交互</text>
    </view>

    <!-- 父组件输入区 -->
    <view class="input-card">
      <text class="card-title">向子组件A传值</text>
      <view class="input-group">
        <input 
          type="text" 
          v-model="parentValue" 
          placeholder="请输入要传递给子组件A的值..."
          class="text-input"
        />
      </view>
    </view>

    <!-- 子组件A容器 -->
    <view class="child-container">
      <com-a 
        :parent-data="parentValue" 
        class="child-card"
      ></com-a>
    </view>

    <!-- 子组件B容器 -->
    <view class="child-container">
      <com-b 
        @child-to-parent="receiveFromB" 
        class="child-card"
      ></com-b>
    </view>

    <!-- 接收子组件B回传值区域 -->
    <view class="receive-card" v-if="valueFromB">
      <text class="card-title">子组件B回传值</text>
      <view class="receive-content">
        <text class="value-text">{{ valueFromB }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import ComA from '/pages/tabBar/case/ui-app1/zujian1/zujian1.vue'
import ComB from '/pages/tabBar/case/ui-app1/zujian2/zujian2.vue'

export default {
  components: { ComA, ComB },
  data() {
    return {
      parentValue: '',
      valueFromB: ''
    }
  },
  methods: {
    receiveFromB(data) {
      this.valueFromB = data
    }
  }
}
</script>

<style scoped>
/* 基础变量 */
:root {
  --primary-bg: #f5f7fa;
  --card-bg: #ffffff;
  --border-radius: 12rpx;
  --shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  --spacing: 24rpx;
}

.parent-container {
  padding: 30rpx;
  background-color: var(--primary-bg);
  min-height: 100vh;
  box-sizing: border-box;
}

/* 页头样式 */
.page-header {
  margin-bottom: 36rpx;
  text-align: center;
}

.page-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #2c3e50;
  display: block;
  margin-bottom: 12rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #7f8c8d;
}

/* 输入卡片样式 */
.input-card, .receive-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 30rpx;
  box-shadow: var(--shadow);
  margin-bottom: var(--spacing);
}

.card-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #34495e;
  margin-bottom: 20rpx;
  display: block;
  padding-bottom: 12rpx;
  border-bottom: 1rpx solid #f1f1f1;
}

.input-group {
  width: 100%;
}

.text-input {
  width: 100%;
  height: 70rpx;
  border: 1rpx solid #e1e5e8;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #2c3e50;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.text-input:focus {
  border-color: #3498db;
  outline: none;
}

/* 子组件容器 */
.child-container {
  margin-bottom: var(--spacing);
}

.child-card {
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* 接收值区域 */
.receive-content {
  padding: 16rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  margin-top: 10rpx;
}

.value-text {
  font-size: 28rpx;
  color: #27ae60;
  line-height: 1.6;
}
</style>